<template>
  <view class="new-file">   
    <!-- 第二种方法 -->
    <view class="head-nav">
      <!-- 头部选项卡 -->
     <view :class="listIndex==index?'activite':''" @click="checkListIndex(index)" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
    </view>
    <!-- 内容 -->
    <view class="content">
       <view class="" v-if="listIndex==0" v-for="(item,index) in hb" :key="index" @click="lipin2()">
				 <view class="top">
				 	  <image :src="item.img2" mode=""></image>
						<text>{{item.text3}}</text>
				 </view>
				 <view class="hb_one">
				 	<image :src="item.img" mode=""></image>
				 <p>{{item.text}}</p>
				 <button>{{item.text2}}</button>
				 </view>
         
       </view>
			<view class="" v-if="listIndex==1" v-for="(item,index) in hb1" :key="index" @click="lipin3()">
			 <view class="top">
			 	  <image :src="item.img2" mode=""></image>
			 						<text>{{item.text3}}</text>
			 </view>
			 <view class="hb_one">
			 	<image :src="item.img" mode=""></image>
			 <p>{{item.text}}</p>
			 <button>{{item.text2}}</button>
			 </view>
			</view>
    </view>
    
    
    
  </view>
  
</template>

<script>
  export default{
    data(){
      return{
        navList:[{name:"我的礼品",id:'1'},{name:"礼品兑换",id:'2'}],
        listIndex:0,
				hb:[{img:'../../static/images/k1_03.png',text:"你现在还不是会员，没有红包",text2:'开通会员，立享红包',text3:'如何看快递?',img2:'../../static/w.png'}],
				hb1:[{img:'../../static/images/k1_03.png',text:"你现在还不是会员，没有红包",text2:'开通会员，立享红包',text3:'如何兑换?',img2:'../../static/w.png'}]
      }
    },
    methods:{
      checkListIndex(index){
        this.listIndex=index;
      },
			lipin2:function(){
				uni.navigateTo({
					url:"./lipin2"
				})
			},
			lipin3:function(){
				uni.navigateTo({
					url:'./lipin3'
				})
			}
    }
  }
</script>

<style scoped>
	/* .new-file{background-color: #f8f9fb;} */
  .head-nav{
    width: 50%;
    margin:20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .activite{
    font-weight: bold;
    border-bottom: 6rpx solid #0065d9;
  }
  .head-nav>view{
    padding-bottom: 10rpx;
  }

	.top{float: right;margin-right:30rpx;line-height:50rpx;text-align: center;height:50rpx;font-size:12px;}
	.top image{width:50rpx;height:40rpx;}
	.top text{line-height:50rpx;}
	.hb_one{position: absolute;top:400rpx;left:200rpx;text-align: center;}
	.hb_one image{width:300rpx;height:200rpx;}
	.hb_one p{width:330rpx;text-align: center;}
	.hb_one button{color: #fff;background-color: #f57144;}
</style>
